import { Card, Button, Icon } from 'antd';
import React from 'react';
import OrderBaseInfo from './OrderBaseInfo';
import OrderReceiverInfo from './OrderReceiverInfo';
import OrderItemInfo from './OrderItemInfo';
import { Order } from '../../model';
import OrderOperationsInfo from './OrderOperationsInfo';
import { orderStatusMap } from '../../List/components/ListTable';
import { OrderDetailsContext } from '..';

interface CardTitleProps {
  orderStatus: number;
}

// Card title
const CardTitle: React.FC<CardTitleProps> = props => (
  <div>
    <Icon type="exclamation-circle" theme="twoTone" twoToneColor="#F56C6C" />
    <span style={{ marginLeft: '6px', color: '#F56C6C' }}>
      当前订单状态：{orderStatusMap[props.orderStatus]}
    </span>
  </div>
);

interface ExtraButtonGroupProps {
  order?: Order;
}

// Card extra button
const ExtraButtonGroup: React.FC<ExtraButtonGroupProps> = props => {
  const { order } = props;
  return (
    <OrderDetailsContext.Consumer>
      {ctxt => {
        const orderStatusToButtonTextMap = {
          0: '关闭订单',
          1: '取消订单',
          2: '订单跟踪',
          3: '订单跟踪',
          4: '删除订单',
        };
        const orderStatusToActionMap = {
          0: () => {
            ctxt.closeOrder(order!.id);
          },
          1: () => {
            ctxt.cancelOrder(order!.id);
          },
          2: () => {
            ctxt.traceOrder(order?.id);
          },
          3: () => {
            ctxt.traceOrder(order?.id);
          },
          4: () => {
            ctxt.deleteOrder(order!.id);
          },
        };
        return (
          <div className="horizon-button-group-reverse">
            {order?.status !== 2 && order?.status !== 3 ? (
              <Button
                onClick={() => {
                  if (order) {
                    orderStatusToActionMap[order.status]();
                  }
                }}
              >
                {orderStatusToButtonTextMap[order ? order.status : 0]}
              </Button>
            ) : null}

            {/* <Button>备注订单</Button> */}
          </div>
        );
      }}
    </OrderDetailsContext.Consumer>
  );
};

// Card head style
const headStyle = { background: '#f2f6fc' };

interface OrderInfoCardProps {
  order?: Order;
  // loading?: boolean;
}

// eslint-disable-next-line react/prefer-stateless-function
class OrderInfoCard extends React.Component<OrderInfoCardProps> {
  render() {
    const order = this.props.order!;

    return (
      <Card
        title={<CardTitle orderStatus={order?.status} />}
        extra={<ExtraButtonGroup order={order} />}
        headStyle={headStyle}
      >
        <div className="row-group">
          <OrderBaseInfo {...order} />
          <OrderReceiverInfo {...order} />
          <OrderItemInfo items={order?.orderItems} />
          <div style={{ float: 'right', fontSize: '16px' }}>
            <span>合计：</span>
            <span style={{ color: 'red' }}>￥{order?.totalAmount}</span>
          </div>
          <OrderOperationsInfo operations={order?.operations} />
        </div>
      </Card>
    );
  }
}

export default OrderInfoCard;
